<template>
  <el-popover trigger="hover" placement="bottom" width="300">
    <!-- <span>{{ scope.row.fabricComposition }}</span> -->
    <el-input
      v-model="popoverInput"
      :min-height="192"
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 24 }"
      :style="{ width: '50%' }"
      :disabled="true"
    />
    <div slot="reference">
      <span class="textname">
        {{ popoverInput }}
      </span>
    </div>
  </el-popover>
</template>
<script>
export default {
  name: "mypopover",
  props: {
    popoverInput: {
      type: String,
      default: "",
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  height: 70vh;
  overflow-x: hidden;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: #f5f7fa;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}
</style>
    